<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    title="设置"
    :visible="visible"
    width="35%"
    @close="close"
  >
    <div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="145px"
        :inline="false"
        size="small"
      >
        <el-form-item label="出炉提醒设定时间:" prop="outRemindSetTime">
          <el-input
            v-model="form.outRemindSetTime"
            placeholder="请输入出炉时间提醒"
          >
            <template slot="append">min</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="到温提醒音乐编号:" prop="toTempRemindMusicId">
          <el-select
            v-model="form.toTempRemindMusicId"
            placeholder="请选择"
            clearable
            filterable
            class="w100"
            @change="getMusicName(1, $event)"
          >
            <el-option
              v-for="item in musicOption"
              :key="item.token"
              :label="item.token"
              :value="item.token"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="到温提醒音乐名称:" prop="toTempRemindMusicName">
          <el-input
            v-model="form.toTempRemindMusicName"
            placeholder="请输入到温提醒音乐名称"
            disabled
          />
        </el-form-item> -->
        <el-form-item label="出炉提醒音乐编号:" prop="outRemindMusicId">
          <el-select
            v-model="form.outRemindMusicId"
            placeholder="请选择"
            clearable
            filterable
            class="w100"
            @change="getMusicName(0, $event)"
          >
            <el-option
              v-for="item in musicOption"
              :key="item.token"
              :label="item.token"
              :value="item.token"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出炉提醒音乐名称:" prop="outRemindMusicName">
          <el-input
            v-model="form.outRemindMusicName"
            placeholder="请输入出炉提醒音乐名称"
            disabled
          />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button size="small" @click="close">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="submit"
        v-loading="btnLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getList } from "@/api/loudspeakerBox.js";
import { shopsUpdate } from "@/api/centralized";
export default {
  // props: {
  //   visible: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  data() {
    return {
      visible: false,
      musicOption: [],
      rules: {
        outRemindSetTime: [
          {
            required: true,
            message: "请输入出炉提醒设定时间",
            trigger: "blur",
          },
        ],
        // toTempRemindMusicId: [
        //   {
        //     required: true,
        //     message: "请选择到温提醒音乐编号",
        //     trigger: "change",
        //   },
        // ],
        outRemindMusicId: [
          {
            required: true,
            message: "请选择出炉提醒音乐编号",
            trigger: "change",
          },
        ],
      },
      form: {},
      btnLoading: false,
    };
  },
  mounted() {
    this.getMusicData();
  },
  methods: {
    // 打开弹窗并获取初试数据
    openDialog(obj) {
      this.visible = true;
      this.form = { ...obj };
    },
    // 获取音响数据
    async getMusicData() {
      const res = await getList({
        page: 1,
        pageSize: 0,
      });
      this.musicOption = res.data.results;
    },
    // 获取音乐名称
    getMusicName(check, e) {
      let name = "";
      for (const item of this.musicOption) {
        if (item.token == e) {
          name = item.name;
        }
      }
      if (check) {
        this.form.toTempRemindMusicName = name;
      } else {
        this.form.outRemindMusicName = name;
      }
    },
    // 弹窗关闭
    close() {
      this.$refs["form"].resetFields();
      this.visible = false;
    },
    // 弹窗提交
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          shopsUpdate({ ...this.form }, this.form.token).then((res) => {
            if (res.code === 1000) {
              this.$msg({
                type: "success",
                message: "修改成功",
              });
              this.$emit("regetData");
              this.$refs["form"].resetFields();
              this.visible = false;
            }
            this.btnLoading = false;
          });
        } else {
          this.$msg("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
